<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box{
            background-color: red;
            
        }
        img{
            /* display: block; */
            /* 图片和 文字的对齐方式 */
            vertical-align: middle;
        }


        .img{
            vertical-align: -8px;
        }

    </style>
</head>
<body>
    <div class="box">
        <!-- 行内块元素 去 撑起 一个 块级元素高度时 ,下边会有间隙 -->
        <!-- 解决  转成块级元素 -->
        <img src="img/avatar.jpg" alt="">xy

        <!-- 原因就是  图片*(行内块)与文字的对齐方式 -->

        <!-- 沿着 文字基线对齐 -->
    </div>


    <p>
        <img class="img" src="img/talk-icon.png" alt="">
        不凡学院
    </p>
</body>
</html>